<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图上传</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<button id="btn_upload">点击上传</button>
</body>
</html>
<!--添加图片按钮-->
<script id="addDivHtml" type="text/html">
    <div class="addDiv" onclick="javascript:$('#file').trigger('click')">
        <img src="../image/add.png">
    </div>
</script>
<!--上传图片弹框 -->
<script id="uploadDialog" type="text/html">
    <div class="upload-image-list">
        <input type="file" id="file" style="display: none;" onchange="onFileUpload()">
        {{d.addHtml}}
    </div>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../layui/layui.all.js"></script>
<script>
    var files=[];
    /**
     * 图片选择回调
     */
    function onFileUpload() {
        console.log($('#file')[0].files[0]);
        files.push($('#file')[0].files[0]);
        var reads = new FileReader();
        reads.readAsDataURL($('#file')[0].files[0]);
        reads.onload = function () {
            //this.result
            $('.upload-image-list').html(
                $('.upload-image-list').html().replace($('#addDivHtml').html(), '')
                + `<div class="item">
                    <img class="image" src="${this.result}"/>
                    <img src="../image/delete.png" class="delete" onclick="deleteImg()">
                </div>`
                + $('#addDivHtml').html());
        };
    }
    /**
     * 删除图片
     * @param index
     */
    function deleteImg(index){
        index=0;
        console.log(files);
        files.splice(index,1);
        $(`.upload-image-list .item`)[index].className="delItem";
    }
    layui.use(['layer', 'laytpl'], function () {
        window.layer = layui.layer;
        window.laytpl = layui.laytpl;
        mounted();
    });
    function mounted() {
        $('#btn_upload').click(function () {
            laytpl($('#uploadDialog').html()).render({addHtml: $('#addDivHtml').html()}, function (html) {
                console.log(html);
                layer.open({
                    title: '上传',
                    type: 1,
                    content: html,
                    area: ['50%', '70%'],
                    btn:['确定','取消'],
                    yes:function (index, layero) {
                    },
                    btn2:function (index,layero) {
                    }
                })
            });
        })
    }
</script>